<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>相机</title>
<style>
    #videoContainer {
        position: relative;
        width: 640px;
        height: 480px;
    }
    #video {
        width: 100%;
        height: 100%;
    }
    #canvas {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
</head>
<body>
<div id="videoContainer">
    <video id="video" autoplay></video>
    <canvas id="canvas"></canvas>
</div>
<button id="capture">拍照</button>
<a id="download" download="photo.jpg" style="display: none;">下载图片</a>
<script>
    // 获取元素引用
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const captureButton = document.getElementById('capture');
    const downloadLink = document.getElementById('download');

    // 初始化摄像头
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
            video.srcObject = stream;
        })
        .catch(error => {
            console.error('无法访问视频流：', error);
        });

    // 尝试识别亮物体并绘制捕捉框
    function trackBrightObject() {
        const videoWidth = video.videoWidth;
        const videoHeight = video.videoHeight;
        canvas.width = videoWidth;
        canvas.height = videoHeight;

        ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
        const imageData = ctx.getImageData(0, 0, videoWidth, videoHeight);
        const threshold = 180; // 你可以调整这个阈值来适应不同的情况
        let top = videoHeight;
        let bottom = 0;
        let left = videoWidth;
        let right = 0;

        for (let y = 0; y < videoHeight; y++) {
            for (let x = 0; x < videoWidth; x++) {
                const index = (y * videoWidth + x) * 4;
                const r = imageData.data[index];
                const g = imageData.data[index + 1];
                const b = imageData.data[index + 2];
                const brightness = 0.299 * r + 0.587 * g + 0.114 * b;

                if (brightness > threshold) {
                    top = Math.min(top, y);
                    bottom = Math.max(bottom, y);
                    left = Math.min(left, x);
                    right = Math.max(right, x);
                }
            }
        }

        if (top < bottom && left < right) {
            ctx.clearRect(0, 0, videoWidth, videoHeight);
            ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
            ctx.strokeStyle = 'red';
            ctx.strokeRect(left, top, right - left, bottom - top);
        }
    }

    // 设置定时器来追踪物体
    setInterval(trackBrightObject, 50);

    // 拍照功能
    captureButton.addEventListener('click', () => {
        const videoWidth = video.videoWidth;
        const videoHeight = video.videoHeight;
        const imageData = ctx.getImageData(0, 0, videoWidth, videoHeight);
        const threshold = 180; // 你可以调整这个阈值来适应不同的情况
        let top = videoHeight;
        let bottom = 0;
        let left = videoWidth;
        let right = 0;

        for (let y = 0; y < videoHeight; y++) {
            for (let x = 0; x < videoWidth; x++) {
                const index = (y * videoWidth + x) * 4;
                const r = imageData.data[index];
                const g = imageData.data[index + 1];
                const b = imageData.data[index + 2];
                const brightness = 0.299 * r + 0.587 * g + 0.114 * b;

                if (brightness > threshold) {
                    top = Math.min(top, y);
                    bottom = Math.max(bottom, y);
                    left = Math.min(left, x);
                    right = Math.max(right, x);
                }
            }
        }

        if (top < bottom && left < right) {
            const width = right - left;
            const height = bottom - top;
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(video, left, top, width, height, 0, 0, width, height);
            downloadLink.href = canvas.toDataURL('image/jpeg');
            downloadLink.style.display = 'block';
        }
    });
</script>
</body>
</html>